<template>
    <div>
        <header-test name="我的订单" :back="'/person'"/>
        <van-tabs v-model:active="active" @change="getOrderData">
            <van-tab
                v-for="tab in tabs"
                :title="tab.title"
                :key="tab.title"
                :name="tab.name"
            >
                <div
                    class="order_item"
                    v-for="(item, index) in orderList"
                    :key = "index"
                    @click="goToOrderDetails(item.orderNo)"
                >
                    <div class="order_time">
                        <span>订单时间：{{item.createTime}}</span>
                        <span>{{ item.orderStatusString }}</span>
                    </div>
                    <div class="order_good_info">
                        <div>
                            <img 
                            :src="item.newBeeMallOrderItemVOS[0].goodsCoverImg"
                            alt=""
                            class="good_pic"
                            />
                        </div>
                    
                        <div class="good_info">
                            <div>{{ item.newBeeMallOrderItemVOS[0].goodsName }}</div>
                            <div class="good_price">
                                <span>
                                    ￥{{ item.newBeeMallOrderItemVOS[0].sellingPrice }}
                                </span>
                                <span>
                                    x{{ item.newBeeMallOrderItemVOS[0].goodsCount }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import HeaderTest from '@/components/HeaderTest.vue';
import { reactive,toRefs } from '@vue/reactivity';
import { getOrderList } from "@/service/order";
import { onMounted } from '@vue/runtime-core';
import { useRouter } from 'vue-router';


export default {
    components: { HeaderTest },
    setup() {
        const router = useRouter();
        const state = reactive({
            tabs:[
                {title:"全部",name:""},
                {title:"待付款",name:"0"},
                {title:"待确认",name:"1"},
                {title:"代发货",name:"2"},
                {title:"已发货",name:"3"},
                {title:"交易完成",name:"4"},
            ],
            orderList:[],
        });
        onMounted(async()=>{
            getOrderData();
        });
        const getOrderData = async (tab) => {
            const status = tab && Number(tab);
            const { data } = await getOrderList({
                pageNumber:1,
                status,
            });
            state.orderList = data.list;
        };
        const goToOrderDetails = (orderNo) => {
            router.push({
                name:"/order-details",
                query: {
                    orderNo,
                },
            });
        };

        return {
            ...toRefs(state),
            getOrderData,
            goToOrderDetails,
        };
    },
};


</script>

<style lang="less" scoped>

.order_item {
    height: 8rem;
    margin: 1rem;
    font-size:0.8rem;
    .order_item {
        display: flex;
        justify-content: space-between;
    }
    .order_good_info {
        display: flex;
        margin: 0.5rem 0;
        .good_pic {
            width: 6rem;
            height: 6rem;
        }
        .good_info {
            height: 5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .good_price {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

</style>